<template>
	<!-- 台账配置 -->
	<div class="ledgerConfiguration">
		<CommonTitle titleName="表头设置"></CommonTitle>

		<div class="content_t">
			<div class="c_t_ledger_n">
				<div class="name">台账名称</div>
				<el-input
					:disabled="ledgerId"
					v-model="state.ledgerName"
					placeholder="请输入台账名称"
				/>
			</div>
			<div class="c_t_ledger_c">
				<!--  -->
				<div
					class="c_t_ledger_c_item"
					:class="v.flag ? 'c_t_ledger_c_item_hover' : ''"
					v-for="(v, i) in state.tableList"
					:key="i"
					@click="handleLedgerSwitch(v)"
				>
					{{ v.tableHeader }}
					<div class="layerHover">
						<svg-icon icon-class="project-detail-icon-hover" class="icon" />
					</div>
				</div>
			</div>

			<div class="submitBtn">
				<el-button
					color="#D4AE85"
					@click="handelConfig('保存')"
					v-if="ledgerName"
					>保存配置</el-button
				>
				<el-button color="#D4AE85" @click="handelConfig('创建')" v-else
					>创建配置</el-button
				>
			</div>
		</div>

		<!-- 表格 -->
		<public-table
			class="m-t20"
			:index="true"
			:page="state.page"
			border
			:tableData="state.tableData"
			:isPaging="false"
			:tableOption.sync="state.tableOption"
		>
			<template #operation="scope">
				<!-- <span
            style="cursor: pointer;color: #fc7037"
            @click="toPath(scope.row)"
        >{{scope.row.operation}}</span> -->
				<el-button
					color="#FF7B50"
					@click="handleView(scope.row, '查看')"
					style="color: #fff"
					type="primary"
					>查看</el-button
				>
			</template>
		</public-table>

		<!-- 配置成功 -->
		<SuccessDialog
			ref="successDRef"
			:prompt="ledgerName ? '保存配置成功' : '创建配置成功'"
		></SuccessDialog>
	</div>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from "vue";
import CommonTitle from "@/components/CommonTitle.vue";
import PublicTable from "@/components/PublicTable.vue";
import SuccessDialog from "@/components/SuccessDialog.vue";
import { ElInput, ElMessage } from "element-plus";
import { ledgerApi } from "@/api/biddingProject";
import { useRoute, useRouter } from "vue-router";
import { getURLhandler } from "@/views/constructionProjectManage/static/utools.js";
const route = useRoute();
const router = useRouter();
const ledgerId = getURLhandler(route.path).ledgerId;
const ledgerName =
	decodeURIComponent(getURLhandler(route.path).ledgerName) || "";
console.log("2222", ledgerName);
const state = reactive({
	ledgerName: ledgerName || "",
	page: {
		total: 0,
		current: 1,
		size: 50,
	},
	tableOption: [
		{ label: "招标项目台账 ", prop: "tableHeader", width: 900 },
		{ label: "操作", prop: "operation", slot: true, width: 300 },
	],
	dialogVisible: false,
	tableData: [],
	tableList: [],
});

const successDRef = ref(null);

/* 公共表头 */
const getCommonConfigurationList = () => {
	ledgerApi.getCommonConfigurationList().then((res) => {
		if (res.code == 200) {
			state.tableList = res.data;
			state.tableList = getArrDifference(state.tableList, state.tableOption);
		}
	});
};

/* 台账表头 */
const getConfigurationList = () => {
	ledgerApi.getConfigurationList(ledgerId).then((res) => {
		if (res.code == 200) {
      state.tableOption = res.data.map((v) => {
        return {
          label: v.tableHeader,
          minWidth: v.tableHeader.length * 25,
          ...v,
        };
			});
      state.tableList = getArrDifference(state.tableList, state.tableOption);
      console.log(state.tableOption);
		}
	});
};

const getArrDifference = (arr1, arr2) => {
	return arr1.map((v) => {
		const obj = v;
		arr2.filter((item) => {
			if (v.ledgerCommonConfigurationId === item.ledgerCommonConfigurationId) {
				obj.flag = true;
			}
    });
		return obj;
	});
};

const handelConfig = (type) => {
	const params = {
		ledgerId: ledgerId,
		ledgerName: state.ledgerName,
		list: state.tableOption.map((v) => v.ledgerCommonConfigurationId),
	};
	if (type === "保存") {
		ledgerApi.updateProjectLedger(params).then((res) => {
			if (res.code == 200) {
				successDRef.value.open();
				setTimeout(() => {
					router.push("/tender/ledgerPage");
				}, 1000);
			}
		});
	} else {
		if (!state.ledgerName || state.ledgerName.trim() === "") {
			ElMessage.warning("台账名称不能为空!");
			return;
		}
		ledgerApi.addProjectLedger(params).then((res) => {
			if (res.code == 200) {
				successDRef.value.open();
				setTimeout(() => {
					router.push("/tender/ledgerPage");
				}, 1000);
			}
		});
	}
};

const handleLedgerSwitch = (v) => {
	v.flag = !v.flag;
	state.tableOption = state.tableList.filter((v) => {
		if (v.flag) {
			v.label = v.tableHeader;
			return v;
		}
	});
};

const handleView = (row) => {};

// watch(() => state.tableList, value => {
//   if (value.length > 0) {
//       state.tableList = getArrDifference(state.tableList, state.tableOption)
//   }
// })
// watch(()=>state.tableOption,value => {
//   if (value.length > 0) {
//       state.tableList = getArrDifference(state.tableList, state.tableOption)
//   }
// })

onMounted(() => {
	getCommonConfigurationList();
	getConfigurationList();
});
</script>
<style lang="scss" scoped>
.ledgerConfiguration {
	.content_t {
		position: relative;
		width: 100%;
		// height: 252px;
		border-radius: 10.0032px;
		border: 0.9984px solid #e3e7f1;
		padding: 34.0032px 37.9968px;
		.c_t_ledger_n {
			display: flex;
			align-items: center;
			width: 90% !important;
			.name {
				width: 80.0064px;
				height: 13.9968px;
				font-size: 13.9968px;

				font-weight: 700;
				color: #1a1a1a;
			}
		}
		.c_t_ledger_c {
			display: flex;
			margin-top: 32.0064px;
			flex-wrap: wrap;

			.c_t_ledger_c_item {
				position: relative;
				overflow: hidden;
				width: 256.992px;
				height: 42.0096px;
				border-radius: 6.0096px;
				border: 0.9984px dotted #666;
				text-align: center;
				line-height: 42.0096px;
				font-size: 13.9968px;
				color: #666;
				margin: 0 30.0096px 27.9936px 0;
				cursor: pointer;
			}
			.c_t_ledger_c_item_hover {
				border: 0.9984px solid var(--el-color-primary);
				color: var(--el-color-primary);
				box-shadow: 0px 2.9952px 15.9936px 0px rgba(255, 123, 80, 0.01);

				.layerHover {
					position: absolute;
					width: 30px;
					height: 20px;
					background-color: var(--el-color-primary);
					top: 0;
					right: 0;
					border-radius: 0 0 0 6px;
					.icon {
						position: absolute;
						top: 0%;
						left: 6px;
						width: 17px;
						height: 17px;
						text-align: center;
					}
				}
			}
		}
	}

	.submitBtn {
		position: absolute;
		bottom: 50px;
		right: 30px;
		.el-button {
			width: 120px;
			height: 36px;
			color: #fff;
			border-radius: 36px;
		}
	}
}
</style>
